<template>
	<view class="login">
		<view class="main">
			<view class="logoBox">
				<image :src="$oss($store.state.config.user_logo_image)" class="logo" mode=""></image>
			</view>
			<view class="newtip flex-cneter u-m-t-200 u-font-26">欢迎来到{{config.user_name}}</view>
			<!-- #ifdef APP -->
			<view class="LoginForm1" style="background-color: rgba(255, 255, 255, 0);">
				<view class="mianbtn1"  @click="$goTo('pages_login/phone/phone')">
					手机号登录
				</view>
			</view>
			<!-- #endif -->
			<view class="LoginForm" style="background-color: rgba(255, 255, 255, 0);">
				<view class="mianbtn" @click="login" >
					微信登录
				</view>
			</view>
			<view class="blank"></view>
			<view class="bottom flex-cneter">
				<view class="flex-cneter">
					<image v-if="read==1" @click="read=0" style="width: 30rpx; height: 30rpx;margin-right: 10rpx;"
						src="../../static/pages_login/read.png" mode=""></image>
					<view class="circle" v-else @click="read=1">
					</view>
					已阅读并同意 <text class="green"
						@click="$goTo('/pages/article/article?title=用户协议&type=servicecontent')">《用户协议》</text> 与
					<text class="green"
						@click="$goTo('/pages/article/article?title=隐私政策&type=privacycontent')">《隐私保护政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				read: 1,
				// config: this.$store.state.config
			};
		},
		computed: {
			config() {
				return this.$store.state.config
			}
		},
		onLoad() {
			if (uni.getStorageSync('invitecode')) {
				this.invitecode = uni.getStorageSync('invitecode')
			}
			// #ifdef MP-WEIXIN
			this.getWxCode()
			// #endif
			// #ifdef H5
			let info = this.getUrlCode()
			if (info.code) {
				this.login()
			}
			// #endif
		},
		methods: {
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				// this.winUrl = url;
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
					}
				}
				return theRequest;
			},
			getWxCode() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.codes = loginRes.code;
					}
				});
			},
			login() {
				var that = this
				if (this.read === 0) {
					uni.$u.toast('请阅读并勾选同意协议！');
					return
				}
				uni.showLoading({
					title: '登录中'
				})

				// #ifdef H5
				this.$wxOauth((res) => {
					this.toLogin(res)
				})
				// #endif
				
				// #ifdef APP
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: function(loginRes) {
						if (loginRes) {
							that.$api.post('/wechatlogin', {
								code: loginRes.code
							}).then(res => {
								that.toLogin(res)
							}).catch((res) => {
								uni.hideLoading();
							})
						}
					},
					fail: (e) => {
						uni.hideLoading();
					}
				});
				// #endif
				
				// #ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: '获取头像昵称',
					success: function(infoRes) {
						if (that.codes) {
							let data = {
								encryptedData: encodeURIComponent(infoRes.encryptedData),
								iv: infoRes.iv,
								rawData: infoRes.rawData,
								signature: infoRes.signature,
								code: that.codes
							}
							that.$api.post('/wxlogin', data).then(res => {
								that.codes = ''
								that.getWxCode()
								that.toLogin(res)
							}).catch((res) => {
								that.codes = ''
								that.getWxCode()
								uni.hideLoading();
							})
						}
					}
				});
				// #endif
			},
			toLogin(res){
				uni.hideLoading();
				if (res.data.userinfo.mobile) {
					uni.setStorageSync('token', res.data.userinfo.token);
					// #ifdef H5
					window.location.href = window.location.origin + '/pro'
					// #endif
					// #ifndef H5
					uni.reLaunch({
						url: '/pages/index/index',
					})
					// #endif
					
				} else {
					// #ifdef H5
					window.location.href = window.location.origin + '/pro/#/pages_login/phone/bind?token='+res.data.userinfo.token
					// #endif
					// #ifndef H5
					uni.$u.route({
						url: '/pages_login/phone/bind?token=' + res.data.userinfo.token
					})
					// #endif
					
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		width: 100vw;
		box-sizing: border-box;
		overflow: auto;
	}
	.login{
		position: relative;
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		.main{
			position: relative;
			z-index: 10;
			height: 100%;
			display: flex;
			flex-direction: column;
		}
		.blank{
			flex: 1;
		}
		.bottom{
			margin-bottom: 160rpx;
		}
	}
	.logoBox {
		text-align: center;
		padding-top: 200rpx;

		.logo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}
	}
	.newtip{
		color: #B4BABE;
	}
	.LoginForm1 {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		width: 90vw;
		margin: 0rpx auto;
		}
	.LoginForm {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		width: 90vw;
		margin: 20rpx auto 0;

		.LoginForm_title {
			font-size: 28rpx;
			align-items: center;
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}

		.inputbox {
			background-color: #F8FAFB;
			border-radius: 40rpx;
			padding: 20rpx 20rpx 20rpx 40rpx;
			width: 90%;
			margin: 30rpx auto;
			justify-content: space-between;

			.green {
				font-size: 28rpx;
				color: #00CE9B;
			}

			.shu {
				width: 3rpx;
				height: 30rpx;
				background-color: #00CE9B;
			}

			.ppp {
				font-size: 28rpx;
			}
		}
	}

	.mianbtn {
		width: 90%;
		font-size: 28rpx;
		color: #fff;
		background-color: #00CE9B;
		text-align: center;
		padding: 30rpx 0;
		margin: 0rpx auto -20rpx;
		border-radius: 50rpx;
	}
	.mianbtn1 {
		width: 90%;
		font-size: 28rpx;
		color: #00CE9B;
		border: 2rpx solid #00CE9B;
		text-align: center;
		padding: 30rpx 0;
		margin: 0 auto;
		border-radius: 50rpx;
	}
	
	.register {
		font-size: 28rpx;

		text {
			&:nth-child(1) {
				color: #B4BABE;
			}

			&:nth-child(2) {
				color: #00CE9B;
			}
		}
	}

	.bottom {
		width: 100vw;
		font-size: 28rpx;
		.circle {
			width: 28rpx;
			height: 28rpx;
			border: 2rpx solid #999;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.green {
			color: #00CE9B;
		}
	}
</style>